<template>
    <!-- <header> -->
    <div class="l-content">
        <el-button size="small" @click="setCollse">
            <el-icon>
                <Menu />
            </el-icon>
        </el-button>
        <el-breadcrumb class="bread" separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="current['path']" v-if="current">{{ current['label'] }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="r-content">
        <el-dropdown>
            <span class="el-dropdown-link">
                <img :src="getImg()" alt="头像">
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item @click="loginOut()">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
    <!-- </header> -->
</template>

<script setup lang = 'ts'>
import { useStore } from '../store'
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
const router = useRouter()
const test = useStore()
const getImg = () => new URL('../assets/images/avter4.webp', import.meta.url).href

// 结构store中state的值
const {current} = storeToRefs(test)

const setCollse = () => {
    test.isCollse = !test.isCollse
}

// 退出
const loginOut = ()=>{
    test.cleanRoutes()
    router.push('/login')
}
</script>

<style lang="less" scoped>
.l-content {
    display: flex;
    align-items: center;

    .bread {
        margin-left: 10px;
        :deep(span) {
            color: rgb(189, 187, 187);
            font-size: 15px;
            cursor: pointer !important;
        }
    }
}

.r-content img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}
</style>
